AJAX ব্যবহার করে ওয়েব পেজ থেকে সার্ভারের ডেটাবেসে ডেটা পাঠানো এবং সেখান থেকে ডেটা সংগ্রহ করা সম্ভব হয়। এই পদ্ধতি ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলো আরও ডাইনামিক, ইন্টারঅ্যাকটিভ এবং দ্রুত হয়ে ওঠে। সাধারণত, AJAX রিকোয়েস্ট পাঠিয়ে PHP বা অন্য সার্ভার সাইড স্ক্রিপ্টে ডেটাবেস কোয়েরি (Query) চালানো হয় এবং ফলস্বরূপ ডেটা ব্রাউজারে ফেরত পাঠানো হয়।
এখানে, আমরা একটি MySQL ডেটাবেসে ডেটা ইনসার্ট (insert) করার এবং ডেটা রিট্রিভ (retrieve) করার উদাহরণ দেখব।
প্রথমে, আপনার ডেটাবেস সেটআপ করতে হবে। আমরা একটি users টেবিল তৈরি করব যেখানে name এবং email ফিল্ড থাকবে।
SQL Query for Creating Table:
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
email VARCHAR(50) NOT NULL,
reg_date TIMESTAMP
);
ধরা যাক, আমরা AJAX ব্যবহার করে একটি ফর্মের মাধ্যমে ইউজারের নাম এবং ইমেইল ডেটাবেসে পাঠাব।
<form id="userForm">
<input type="text" id="name" placeholder="Enter your name" required>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit">Submit</button>
</form>
<div id="response"></div>
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault(); // ফর্ম সাবমিট হওয়া থেকে রোধ করা
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'insert.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('response').innerHTML = xhr.responseText; // রেসপন্স ডিভে প্রদর্শন
} else {
console.error('Error:', xhr.status);
}
};
xhr.send('name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email)); // ইনপুট পাঠানো
});
<?php
// ডেটাবেস সংযোগ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db"; // ডেটাবেসের নাম
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ পরীক্ষা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// ইনপুট ডেটা রিসিভ করা
if (isset($_POST['name']) && isset($_POST['email'])) {
$name = $_POST['name'];
$email = $_POST['email'];
// SQL কোয়েরি
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
name এবং email ইনপুট ফিল্ডে থাকবে।name এবং email।$_POST এর মাধ্যমে ডেটা গ্রহণ করবে এবং ডেটাবেসে ইনসার্ট করবে। ইনসার্ট সফল হলে "New record created successfully" মেসেজটি ফিরে পাঠানো হবে।এখন, আমরা AJAX ব্যবহার করে ডেটাবেস থেকে তথ্য রিট্রিভ করব এবং সেগুলো ওয়েব পেজে প্রদর্শন করব।
// একটি ফাংশন তৈরি করা যা ডেটাবেস থেকে তথ্য নেবে
function loadUsers() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'fetch.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('response').innerHTML = xhr.responseText; // রেসপন্স ডিভে প্রদর্শন
} else {
console.error('Error:', xhr.status);
}
};
xhr.send();
}
// পেজ লোড হওয়ার পর ডেটা লোড করা
window.onload = loadUsers;
<?php
// ডেটাবেস সংযোগ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db"; // ডেটাবেসের নাম
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ পরীক্ষা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// SQL কোয়েরি ডেটা সংগ্রহের জন্য
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
// ডেটা প্রক্রিয়া করা এবং HTML আউটপুট তৈরি
if ($result->num_rows > 0) {
echo "<ul>";
while($row = $result->fetch_assoc()) {
echo "<li>ID: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. "</li>";
}
echo "</ul>";
} else {
echo "0 results";
}
$conn->close();
?>
loadUsers() ফাংশনটি fetch.php স্ক্রিপ্টে GET রিকোয়েস্ট পাঠাবে। রেসপন্স হিসেবে PHP স্ক্রিপ্ট ডেটাবেস থেকে পাওয়া তথ্য HTML আউটপুট হিসেবে ফিরিয়ে দেবে।SELECT কোয়েরি চালানো হচ্ছে যা users টেবিল থেকে id, name, এবং email ফিল্ডগুলো নেয়। এরপর এই ডেটা HTML আউটপুট আকারে পাঠানো হয়, যা ব্রাউজারে প্রদর্শিত হয়।AJAX এবং PHP ব্যবহার করে ডেটাবেসে ডেটা ইনসার্ট এবং রিট্রিভ করা সহজ এবং কার্যকর পদ্ধতি। AJAX এর মাধ্যমে ফর্ম সাবমিট বা ডেটাবেস থেকে ডেটা লোড করা হয় এবং PHP স্ক্রিপ্টে ডেটা প্রক্রিয়া করা হয়। এই পদ্ধতি ওয়েব অ্যাপ্লিকেশনগুলোকে দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে, কারণ এটি পেজ রিলোড ছাড়াই ডেটাবেসের সাথে ইন্টারঅ্যাক্ট করতে পারে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
